<script setup lang="ts">

import {OrderForm, OrderPageVO, OrderQuery, OrderRefundForm, OrderStatusStatVo} from "@/api/order/types";
import {
  deleteOrder,
  editNote,
  exportShopOrder,
  getOrderInitFilter,
  getOrderList,
  refundOrder,
  statusStatList
} from "@/api/order";
import {memberLabelOpts, orderStatusMapping} from "@/utils/status";
import {geDailyMenutOptions} from "@/api/shop/dailyMenu";
import {phoneReplace} from "@/utils";

defineOptions({
  name: "orderList",
  inheritAttrs: false,
});
const userRoute = useRoute();

const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const current_role = localStorage.getItem("role_name");

const loading = ref(false);
const orderList = ref<OrderPageVO[]>([]);
const statList = ref<OrderStatusStatVo[]>([]);
const shopList = ref<any[]>([]);
const areaList = ref<any[]>([]);
const menuList = ref<any[]>([]);
const deliverTimeList = ref<any[]>([]);
const ids = ref<number[]>([]);
const total = ref(0);
const checkAll = ref(false); //选择全部
const currentIndex = ref(0);
const refundVisibie = ref(false);
const showDetailDialog = ref(false); //详情
const showPrinterDialog = ref(false); //打印弹窗
const showConfirmDeliverDialog = ref(false); //接单弹窗
const note = ref("");

const api_url = import.meta.env.VITE_APP_API_URL
console.log(api_url)

const printerType = ref(""); // 打印类型
const noteVisibie = ref(false);

const statusList = orderStatusMapping();
const memberTagList = memberLabelOpts();
const queryParams = reactive<OrderQuery>({
  pageNum: 1,
  pageSize: 10,
  checkAll: false
});

const dialog = reactive({
  title: "",
  visible: false,
});

const formData = reactive<OrderForm>({
  status: 1,
});

const formRefundData = reactive<OrderRefundForm>({
  refund_price: 0,
  refund_note: "",
})

const rules = reactive({
  refund_price: [
    {required: true, message: "请输入退款金额", trigger: "blur"},
    {min: 0, message: "退款金额不能小于0", trigger: "blur"},
  ],
  refund_note: [
    {required: true, message: "请输入退款备注", trigger: "blur"},
  ],
})

/**
 * 显示部分退款
 * @param idx
 */
function showRefund(idx: number) {
  refundVisibie.value = true;
  currentIndex.value = idx;
}

/**
 * 显示部分退款
 * @param idx
 */
function showNoteDialog(idx: number) {
  noteVisibie.value = true;
  currentIndex.value = idx;
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  getOrderList(queryParams)
    .then(({data}) => {
      orderList.value = data.items;
      orderList.value.forEach((data: any) => {
        if (current_role !== 'sys') {
          data.address.phone = phoneReplace(data.address.phone || 0);
        }
      })

      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
      handleStatus();
    });


}

/**
 * 处理状态切换
 */
function handleStatus() {
  statusStatList(queryParams).then((data) => {
    statList.value = data.data || [];
  }).finally(() => {
    loading.value = false;
  })
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

/** 行复选框选中  */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}

/**
 *更新备注
 * @param note
 */
function handleNoteSubmit() {
  if (!orderList.value || !Array.isArray(orderList.value) || currentIndex.value === undefined || currentIndex.value < 0 || currentIndex.value >= orderList.value.length) {
    ElMessage.error("请选择订单");
    return;
  }
  loading.value = true;
  editNote(orderList.value[currentIndex.value]?.id || '', note.value || "").then(result => {
    ElMessage.success("备注成功");
    loading.value = false;
    currentIndex.value = 0;
    noteVisibie.value = false;
    orderList.value[currentIndex.value].remark = note.value;
  }).catch(errmsg => {
    loading.value = false;
  })
}

/**
 * 部分退款
 */
function handleRefundSubmit() {

  if (!orderList.value || !Array.isArray(orderList.value) || currentIndex.value === undefined || currentIndex.value < 0 || !orderList.value[currentIndex.value] || currentIndex.value >= orderList.value.length) {
    ElMessage.error("参数错误");
    return;
  }

  if ((formRefundData?.refund_price || 0) <= 0) {
    ElMessage.error("退款金额必须大于0");
    return;
  }

  if (orderList.value[currentIndex.value]) {
    if ((formRefundData?.refund_price || 0) > (orderList.value[currentIndex.value]?.total_price || 0)) {
      ElMessage.error("退款金额不能大于订单金额");
      return;
    }

    formRefundData.id = orderList.value[currentIndex.value].id;
    loading.value = true;

    refundOrder(orderList.value[currentIndex.value].out_trade_no || '', formRefundData).then(result => {
      ElMessage.success("退款成功");
      loading.value = false;
      currentIndex.value = 0;
      refundVisibie.value = false;
      orderList.value[currentIndex.value].status = 60;
    }).catch(errmsg => {
      loading.value = false;
    })
  }
}

/**
 * 全额退款
 * @param idx
 */
function confirmRefund(idx?: number) {

  if (!orderList.value || !Array.isArray(orderList.value) || idx === undefined || idx < 0 || idx >= orderList.value.length) {
    ElMessage.warning("请勾选删除项");
    return;
  }
  const order = orderList.value[idx];
  const orderId = order.id;
  const orderNo = order.out_trade_no;

  ElMessageBox.confirm("确认退款?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    refundOrder(orderList.value[idx].out_trade_no || '', {}).then((res) => {
      orderList.value[idx].status = orderList.value[idx].current_status = 60;
      ElMessage.success(res.msg || "退款成功");
      handleQuery();
    });
  });
}

/**  重置字典类型表单 */
function resetForm() {
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();

  formData.id = undefined;
  formData.status = 1;
}

/** 删除字典类型 */
function handleDelete(idx?: number) {

  if (!orderList.value || !Array.isArray(orderList.value) || idx === undefined || idx < 0 || idx >= orderList.value.length) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  const orderIds = orderList.value[idx].id;
  if (!orderIds) {
    ElMessage.warning("无效的订单ID");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deleteOrder(orderIds).then(() => {
      ElMessage.success("删除成功");
      resetQuery();
    });
  });
}

let printerFilter = reactive<OrderQuery>({
  pageNum: 1,
  pageSize: 10,
  printerType: 0,
  shop_id: 0,
  ids: '',
});

function resetPrinterFilter() {
  printerFilter.pageNum = 1;
  printerFilter.ids = '';
  printerFilter.shop_id = 0;
  printerFilter.printerType = "";
  printerFilter.sstatus = undefined;
  printerType.value = "";
}

/**
 * 隐藏部分退款
 */
function closeDialog(type: any) {

  if (type === 1) {//备注
    noteVisibie.value = false;
  } else if (type == 2) { //详情
    showDetailDialog.value = false;
  } else if (type == 3) { //打印
    showPrinterDialog.value = false;
  } else if (type == 5 || type == 6) { //确认接单| 出餐
    handleQuery();
    handleStatus();
    showConfirmDeliverDialog.value = false;
  } else {
    refundVisibie.value = false;
  }

  currentIndex.value = 0;
  printerType.value = "";
}

function showDialog(idx: number, type: number, pt: string = "") {
  if (type == 2) {
    showDetailDialog.value = true;
  } else if (type == 3) {
    resetPrinterFilter();
    Object.assign(printerFilter, queryParams);
    printerType.value = pt
    printerFilter.printerType = pt || 0;
    printerFilter.ids = orderList.value[idx]?.id || '';
    showPrinterDialog.value = true;
  } else if (type == 4) { //批量处理
    resetPrinterFilter();
    Object.assign(printerFilter, queryParams);
    printerType.value = pt
    printerFilter.printerType = pt || 0;
    if (!printerFilter.shop_id) {
      ElMessage.error("请先选择店铺");
      return
    }
    if (!queryParams.checkAll) {
      if (ids.value.length == 0) {
        ElMessage.error("至少选择一项");
        return;
      }
      printerFilter.ids = ids.value
    }
    showPrinterDialog.value = true;
  } else if (type == 5 || type == 6) { // 确认接单
    resetPrinterFilter();
    Object.assign(printerFilter, queryParams);

    if (!printerFilter.shop_id) {
      ElMessage.error("请先选择店铺");
      return
    }

    if (!queryParams.checkAll) {
      if (ids.value.length == 0) {
        ElMessage.error("至少选择一项");
        return;
      }
      printerFilter.ids = ids.value;
    }

    printerFilter.sstatus = type == 5 ? 11 : 12;
    showConfirmDeliverDialog.value = true;
  }

  if (type != 4) {
    currentIndex.value = idx;
  }
}

/**
 * 切换状态
 * @param stautus
 */
function changeStatus(stautus?: number) {
  queryParams.sstatus = stautus;
  handleQuery();
  handleStatus();
}

/**
 * 切换楼栋/楼层
 * @param type
 */
function changeArea(type: number) {

}

/** 导出用户 */
function exportOrder() {

  exportShopOrder(queryParams || {}).then((response: any) => {

    const fileData = response.data;
    const fileName = decodeURI(
      response.headers["content-disposition"].split(";")[1].split("=")[1]
    );

    const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
    const blob = new Blob([fileData], {type: fileType});
    const downloadUrl = window.URL.createObjectURL(blob);

    const downloadLink = document.createElement("a");
    downloadLink.href = downloadUrl;
    downloadLink.download = fileName;

    document.body.appendChild(downloadLink);
    downloadLink.click();

    document.body.removeChild(downloadLink);
    window.URL.revokeObjectURL(downloadUrl);
  });
}


onMounted(() => {
  if (userRoute.query.sstatus) {
    queryParams.sstatus = userRoute.query.sstatus || 0;
  }

  getOrderInitFilter().then(res => {
    shopList.value = res.data.shopList || []
    deliverTimeList.value = res.data.deliverTimeList || []
    if (shopList.value.length > 0) {
      queryParams.shop_id = shopList.value[0].id;
    }
    areaList.value = res.data.areaList || []
  }).then(() => {
    geDailyMenutOptions({shop_id: queryParams.shop_id})
      .then((res: any) => {
        menuList.value = res.data || []
      })
    handleQuery();
    handleStatus();
  })
});

//选择店铺
function changeShop() {

  geDailyMenutOptions({shop_id: queryParams.shop_id})
    .then(res => {
      menuList.value = res.data || []
    })

  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
  handleStatus();
}

function checkAllOrder() {
  queryParams.checkAll = !queryParams.checkAll;
}

const tagTypes = ref<any[]>([
  "primary", "success", "info", "warning", "danger"
])

</script>

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="" prop="" style="width: 160px;" v-if="current_role == 'sys'">
          <el-select v-model="queryParams.shop_id" placeholder="请选择店铺" @change="changeShop">
            <el-option :label="op.title" v-for="op in shopList" :value="Number(op.id)"/>
          </el-select>
        </el-form-item>

        <template v-for="(shop,idx) in shopList">
          <template v-if="shop.type == 0 && shop.id == queryParams.shop_id">
            <el-form-item label="" prop="deliver_time" style="width: 130px;">
              <el-select v-model="queryParams.deliver_time" placeholder="--送达时间--">
                <el-option :label="dop" v-for="(dop, ok) in deliverTimeList" :value="Number(ok)"/>
              </el-select>
            </el-form-item>
          </template>
        </template>

        <!--        deliverTimeList-->

        <el-form-item label="" prop="smenu_id" style="width: 160px;" v-if="menuList.length>0">
          <el-select v-model="queryParams.smenu_id" placeholder="请选择菜单" clearable>
            <el-option :label="op.title" v-for="op in menuList" :value="Number(op.id)"/>
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="sstatus" style="width: 160px;">
          <el-select v-model="queryParams.sstatus" placeholder="请选择订单状态" clearable>
            <el-option :label="op" v-for="(op,ok) in statusList" :value="Number(ok)"/>
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="stype" style="width: 160px;">
          <el-select v-model="queryParams.stype" placeholder="请选择会员标签" clearable>
            <el-option :label="op" v-for="(op,ok) in memberTagList" :value="Number(ok)"/>
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="sprovince_id" style="width: 120px;" @click="changeArea(2)">
          <el-select v-model="queryParams.sprovince_id" placeholder="请选择楼栋" clearable>
            <el-option :label="op.title" v-for="(op,ok) in areaList" :value="Number(op.id)"/>
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="scity_id" style="width: 120px;" v-if="queryParams.sprovince_id">
          <template v-for="(province,ok) in areaList">
            <template v-if="queryParams.sprovince_id == province.id">
              <el-select v-model="queryParams.scity_id" placeholder="请选择楼层" clearable>
                <el-option :label="op.title" v-for="(op,ok) in province._child" :value="Number(op.id)"/>
              </el-select>
            </template>
          </template>
        </el-form-item>

        <el-form-item label="下单时间" prop="pay_time" style="width: 420px;">
          <el-date-picker v-model="queryParams.pay_time" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始时间" end-placeholder="结束时间"/>
        </el-form-item>
        <el-form-item label="菜单编号范围" prop="callNo">
          <el-input type="number" v-model="queryParams.start_callNo" placeholder="最小编号" clearable
                    @keyup.enter="handleQuery" style="display: inline-block; width: 100px; margin-right: 10px;"/>
          至
          <el-input type="number" v-model="queryParams.end_callNo" placeholder="最大编号" clearable
                    @keyup.enter="handleQuery" style="display: inline-block; width: 100px;margin-left: 10px;"/>
        </el-form-item>

        <el-form-item label="" prop="sout_trade_no" style="width: 160px;">
          <el-input type="number" v-model="queryParams.sout_trade_no" placeholder="订单号" clearable
                    @keyup.enter="handleQuery"/>
        </el-form-item>

        <el-form-item label="" prop="smobile" style="width: 160px;">
          <el-input type="number" v-model="queryParams.smobile" placeholder="手机号" clearable @keyup.enter="handleQuery"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery()">
            <i-ep-search/>
            搜索
          </el-button>
          <el-button @click="resetQuery()">
            <i-ep-refresh/>
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="20" class="btn-groups">
        <el-button type="primary" size="small" @click="showDialog(0,5)">确认接单</el-button>
        <el-button type="primary" size="small" @click="showDialog(0,6)">确认出餐</el-button>
        <el-button type="warning" size="small" @click="showDialog(0,4,'label')">打印品单</el-button>
        <el-button type="warning" size="small" @click="showDialog(0,4,'order')">打印订单</el-button>
        <el-button type="info" size="small" @click="showDialog(0,4,'keshi')">打印科室汇总单</el-button>
        <el-button type="info" size="small" @click="showDialog(0,4,'stall')">打印档口汇总单</el-button>
        <el-button type="success" size="small" @click="exportOrder()">导出订单</el-button>
      </el-row>

      <el-row :gutter="20" style="padding-top: 5px;">
        <el-col :span="3" align="center" @click="changeStatus(stat.status)" v-for="(stat, idx) in statList"
                style="background: #FFFFFF;">
          <div class="f20" type="primary">{{ stat.amount || 0 }}</div>
          <div class="c6 f13">{{ stat.title }}</div>
        </el-col>
      </el-row>
    </div>

    <el-alert title="" type="error" class="margin10-b" :closable="false">
      已勾选<span class="cc">本页</span> <span id="count_checked">{{ queryParams.checkAll ? total : ids.length }}</span> 个订单
      <a @click="checkAllOrder()" style="color: #164A84;text-decoration: none;cursor: pointer">，勾选符合筛选条件的全部{{
          total
        }}个订单</a>
    </el-alert>

    <el-card shadow="never" class="table-container">

      <el-table v-loading="loading" highlight-current-row :data="orderList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="下单时间" prop="create_time" width="160">
          <template #default="scope">
            <el-tag type="success" size="small" effect="dark" class="margin5-r" v-if="scope.row.callNo">
              {{ scope.row.callNo }}
            </el-tag>
            {{ scope.row.create_time }}
          </template>
        </el-table-column>
        <el-table-column label="会员ID|昵称" prop="member" width="160">
          <template #default="scope">{{ scope.row.uid }} | {{ scope.row.mobile }}</template>
        </el-table-column>
        <el-table-column label="收货地址" prop="code" width="200">
          <template #default="scope">
            <template v-if="scope.row.address">
              <div>{{ scope.row.address.consignee }} {{ scope.row.address.phone }}</div>
              <div>
                {{ scope.row.address.province_title || "" }}
                {{ scope.row.address.city_title || "" }}
                {{ scope.row.address.region_title || "" }}
                {{ scope.row.address.district_title || "" }}
                {{ scope.row.address.address }}
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="所属店铺" prop="shop_title" width="120"/>
        <template v-for="(shop,idx) in shopList">
          <template v-if="shop.id == Number(queryParams.shop_id)">
            <el-table-column label="送达时间" prop="deliver_time" width="140" v-if="shop.type == 0"/>
            <!--              <template #default="scope">
                            <div style="word-break: break-all">{{ scope.row.deliver_time}}</div>
                          </template>
                        </el-table-column>-->
            <el-table-column label="菜单名称" prop="menut_title" width="140" v-if="shop.type == 1">
              <template #default="scope">
                {{ scope.row.shop_type == 1 ? scope.row.menu_title : "普通" }}
              </template>
            </el-table-column>
          </template>
        </template>
        <el-table-column label="商品信息" prop="code" width="200">
          <template #default="scope">
            <template v-for="(product) in scope.row.products">
              <div class="margin3-b"><strong>{{ product.title }}</strong> <span> x{{ product.amount }}</span></div>
              <template v-if="product.type == 2">
                <div style="font-size: 12px;color: #999999;">规格：{{ product.sku_txt }}</div>
              </template>
              <template v-else-if="product.type== 1">
                <el-tag :type="tagTypes[tidx%3] || 'info'" v-for="(tag,tidx) in product['skus']"
                        style="margin-bottom: 5px;">
                  <template v-if="tag.sequence > 0">{{ tag.sequence }} -</template>
                  {{ tag.spec_item_title }} {{ scope.row.type == 1 ? ('x' + tag.amount) : '' }}
                </el-tag>
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="支付金额" prop="total_price"/>
        <el-table-column label="交易状态" align="center" width="100">
          <template #default="scope">
            <el-tag type="info" :class="'order-label-' + scope.row.current_status">
              {{ statusList[scope.row.current_status] }}
            </el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column label="配送信息" prop="code" width="200"/>-->
        <el-table-column label="客服备注" prop="remark" width="100"/>
        <el-table-column fixed="right" label="操作" align="center" width="140">
          <template #default="scope">
            <!--            {{ scope.$index }}-->
            <el-button
              type="primary" link size="small" class="margin5-r" @click.stop="confirmRefund(scope.$index)"
              v-if="scope.row.status == 10 || scope.row.status == 20"
            >确认退款
            </el-button>
            <el-dropdown>
              <el-button type="primary" link size="small" class="el-dropdown-link">
                更多
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <!--                  <el-dropdown-item @click="showRefund(scope.$index)"
                                                      v-if="scope.row.status == 10 || scope.row.status == 20">部分退款
                                    </el-dropdown-item>-->
                  <el-dropdown-item @click="showDialog(scope.$index, 2)">订单详情</el-dropdown-item>
                  <el-dropdown-item @click="handleDelete(scope.$index)">删除订单</el-dropdown-item>
                  <el-dropdown-item @click="showNoteDialog(scope.$index)">订单备注</el-dropdown-item>
                  <el-dropdown-item @click="showDialog(scope.$index, 3, 'label')">打印品单</el-dropdown-item>
                  <el-dropdown-item @click="showDialog(scope.$index, 3, 'order')">打印订单</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
                  v-model:limit="queryParams.pageSize" @pagination="handleQuery" class="pull-right"
                  style="margin: 15px 0px;"/>
      <div class="clearfix"></div>
    </el-card>

    <!-- 编辑表单弹窗 -->
    <el-dialog
      v-model="refundVisibie"
      title="部分退款"
      width="540px"
      @close="closeDialog"
    >
      <el-form
        ref="objFormRef"
        :model="formRefundData"
        :rules="rules"
        label-width="140px"
      >
        <el-form-item label="总金额">
          <text class="fu f-fixed margin5-r">￥</text>
          <text class="f-20">{{ orderList[currentIndex].total_price ? orderList[currentIndex].total_price : "" }}</text>
        </el-form-item>

        <el-form-item label="退款金额" prop="refund_price">
          <el-input
            type="number"
            :min="0"
            :max="orderList[currentIndex]?orderList[currentIndex].total_price:''"
            v-model="formRefundData.refund_price"
            placeholder="请输入退款金额"
            clearable
          />
        </el-form-item>

        <el-form-item label="退款备注" prop="refund_note">
          <el-input
            type="textarea"
            v-model="formRefundData.refund_note"
            placeholder="请输入退款备注"
            clearable
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleRefundSubmit">确 定</el-button>
          <el-button @click="closeDialog" type="default">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 备注表单弹窗 -->
    <el-dialog v-model="noteVisibie" title="客服备注" width="540px" @close="closeDialog(1)">
      <el-form ref="objFormRef" label-width="140px">
        <el-form-item label="备注" prop="refund_note">
          <el-input
            type="textarea"
            v-model="note"
            placeholder="请输入备注"
            clearable
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleNoteSubmit">确 定</el-button>
          <el-button @click="closeDialog(1)" type="default">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <detail
      :visible="showDetailDialog"
      :orderId="orderList[currentIndex]?.id"
      @close="closeDialog(2)"
    />

    <previewPrinter
      :printerType="printerType"
      :pFilter="printerFilter"
      :visible.sync="showPrinterDialog"
      @close="closeDialog(3)"
    />

    <confirmDeliver
      :pFilter="printerFilter"
      :visible.sync="showConfirmDeliverDialog"
      @close="closeDialog(5)"
    />

  </div>
</template>

<style scoped>
.btn-groups {
  padding: 15px 10px 0px;
  font-size: 12px;
  margin-bottom: 0px !important;
}

.el-dropdown-link {
  position: relative;
  top: 3px;
  font-weight: bolder;
}

.el-dropdown-link.is-link {
  border-color: transparent !important;
  border: 0px !important;
}


.el-row {
  margin-bottom: 20px;

  border-top: 1px solid #eee;
  padding: 10px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
  flex: 0 0 16% !important;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.el-link {
  margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>
